/**
 * Created by Administrator on 2018/4/13.
 */
import React from 'react';
import PropTypes from 'prop-types';
import Todo from './Todo';
import DeleteTodo from './DeleteTodo';

const TodoList = ({ todos, toggleTodo, deleteTodo }) => (
	<ul>
		{todos.map(todo =>
			<li className="todo-list" key={`li_${todo.id}`}>
				<Todo
					key={todo.id}
					{...todo}
					onClick={() => toggleTodo(todo.id)}
				/>
				<DeleteTodo
					key={`delete_${todo.id}`}
					onClick={() => deleteTodo(todo.id)}
				/>
			</li>
		)}
	</ul>
)

TodoList.propTypes = {
	todos: PropTypes.arrayOf(
		PropTypes.shape({
			id: PropTypes.number.isRequired,
			completed: PropTypes.bool.isRequired,
			text: PropTypes.string.isRequired
		}).isRequired
	).isRequired,
	toggleTodo: PropTypes.func.isRequired
}

export default TodoList
